<template>
    <div class="app-container">
        <el-card>
            <el-form inline :model="whereForm">
                <el-form-item label="用户昵称">
                    <el-input v-model="whereForm.nickname" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号">
                    <el-input v-model="whereForm.phone" placeholder="请输入用户手机号"></el-input>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-select v-model="whereForm.imStatus" placeholder="请选择用户状态">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchList()">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData.data" v-loading="listLoading" stripe border>
                <el-table-column prop="id" align="center" label="ID" width="80"></el-table-column>
                <el-table-column align="center" label="头像">
                    <template slot-scope="scope">
                        <el-image :preview-src-list="[scope.row.icon]" :src="scope.row.icon"
                            style="width: 40px; height: 40px"></el-image>

                    </template>
                </el-table-column>

                <el-table-column prop="nickname" align="center" label="昵称"></el-table-column>
                <el-table-column prop="imStatus" align="center" label="用户状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.imStatus == 0 ? 'success' : 'danger'">{{scope.row.imStatus === 0 ? '正常' : '封禁'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" align="center" label="用户注册时间">
                </el-table-column>
                <el-table-column prop="imSocialNum" align="center" label="聊天用户">
                </el-table-column>
                <el-table-column prop="lastMsgTime" align="center" label="最近聊天时间">
                </el-table-column>
                <el-table-column  align="center" label="聊天记录">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleMsgDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column  prop="lastTipoffTime" align="center" label="最近一次被举报" >
                </el-table-column>
                <el-table-column  prop="lastTipoffCount" align="center" label="解封日期" >
                </el-table-column>
                <el-table-column  align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="handleEdit(scope.row)">被举报详情</el-button>
                    </template>
                </el-table-column>

            </el-table>
            <div class="pageRight">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper" :current-page.sync="whereForm.pageNum"
                    :page-size="whereForm.pageSize" :page-sizes="[10, 15, 20]" :total="tableData.total">
                </el-pagination>
            </div>
        </el-card>

        <msgdetail ref="msgdetailRef"></msgdetail>
        <jubaoList ref="jubaoListRef"></jubaoList>
    </div>
</template>

<script>
import { getImsMemberStatRecord } from '@/api/im'
import msgdetail from '../components/msgdetail.vue'
import jubaoList from '../components/jubaoList.vue'
export default {
    components: {
        msgdetail,
        jubaoList
    },
    data() {
        return {
            whereForm: {
                nickname: '',
                phone: '',
                imStatus: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: {
                data: [],
                total: 0
            },
            listLoading: false,
            statusOptions: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }]
        }

    },
    created() {
        this.getList();
    },
    methods: {
        handleMsgDetail(val) {
            this.$refs.msgdetailRef.opendialog(val)
        },
         handleEdit(val) {
            this.$refs.jubaoListRef.opendialog(val)
         },
        handleSizeChange(val) {
            this.whereForm.pageNum = 1;
            this.whereForm.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.whereForm.pageNum = val;
            this.getList();
        },
        searchList() {
            this.whereForm.pageNum = 1;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            getImsMemberStatRecord(this.whereForm).then(res => {
                this.tableData.data = res.data.list;
                this.tableData.total = res.data.total;
            }).finally(() => {
                this.listLoading = false;
            })
        }
    }
}
</script>

<style></style>